import React, { useEffect, useState, useRef } from 'react'
import { Steps, Form, Input, Select, Button, message, notification } from 'antd';
import NewsEditor from "../../../components/NewsEdit/NewsEdit"
import style from "./newAdd.module.scss"
import http from "../../../util/http"
import { BulbFilled } from '@ant-design/icons';
const { Step } = Steps;
const { Option } = Select;
export default function NewsAdd(props) {
    const [newsMenu, setNewsMenu] = useState([])
    const [current, setCurrent] = useState(0)
    const [formInfo, setformInfo] = useState({})
    const [content, setContent] = useState("")
    const NewsFrom = useRef();
    useEffect(() => {
        http.get("/categories").then(res => {
            setNewsMenu(res.data)
        })
    }, [])
    // const changeItem = (item) => {
    //     return
    // }
    // const onFinish = (value) => {
    //     console.log(value);
    // }
    const nextPage = () => {
        if (current === 0) {
            console.log(NewsFrom.current)
            // ref.current
            NewsFrom.current.validateFields().then(res => {
                // console.log(res);
                setformInfo(res)
                return setCurrent(current + 1)
            }).catch(err => {
                console.log(err)
            })
        } else {
            if (content === "" || content.trim() === "<p></p>") {
                message.error("新闻内容不能为空")
            } else {
                setCurrent(current + 1)
            }
            console.log(formInfo, content)


        }
    }
    const prevPage = () => {
        return setCurrent(current - 1)
    }
    const user = JSON.parse(localStorage.getItem('token'))
    // 保存草稿箱 提交审核
    const saveDrafts = (auditState) => {
        http.post("/news", {
            ...formInfo,
            content: content,
            region: user.region ? user.region : "全球",
            author: user.username,
            roleId: user.roleId,
            auditState: auditState,
            publishState: auditState,
            createTime: Date.now(),
            star: 0,
            view: 0,
            // publishTime: 1615778496314
        }).then(res => {
            props.history.push(auditState === 0 ? '/news-manage/draft' : '/audit-manage/list')
            notification.info({
                message: `通知`,
                description:
                    `您可以到${auditState === 0 ? '草稿箱' : '审核列表中'}查看你的新闻`,
                placement: "bottomRight",
                style: {
                    color: '#33ff00'
                },
                icon: <BulbFilled style={{ color: '#ffff33' }} />
            });
        })
    }
    return (
        <div className={style.mainContainer}>
            <h1 className={style.title}>撰写新闻</h1>
            <Steps current={current}>
                <Step title="基本信息" description="新闻标题,新闻分类" />
                <Step title="新闻内容" description="新闻主体内容" />
                <Step title="新闻提交" description="保存草稿或者提交审核" />
            </Steps>
            <div style={{ marginTop: 60 }}>
                {
                    current === 0 && <div className={current === 0 ? "" : style.active}>
                        <Form
                            name="basic"
                            // initialValues={{ remember: true }}
                            // onFinish={onFinish}
                            // onFinishFailed={onFinishFailed}
                            autoComplete="off"
                            ref={NewsFrom}
                        >
                            <Form.Item style={{ marginBottom: 30 }}
                                label="新闻标题"
                                name="title"
                                rules={[{ required: true, message: '请输入文章标题' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="新闻分类"
                                name="categoryId"
                                style={{ marginBottom: 60 }}
                                rules={[{ required: true, message: '这是必选项哦！' }]}
                            >
                                <Select>
                                    {/* <Option value="lucy">lucy</Option> */}
                                    {
                                        newsMenu.map(item => {
                                            return <Option value={item.id} key={item.id}>{item.title}</Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        </Form>
                    </div>
                }
                {
                    current === 1 && <div className={current === 1 ? "" : style.active}>
                        <NewsEditor getContent={(text) => {
                            // console.log(text);
                            setContent(text)
                        }}></NewsEditor>
                    </div>
                }
                {
                    current === 2 && <div className={current === 2 ? "" : style.active}></div>
                }
                {
                    current > 0 && <Button style={{ width: 100 }}
                        onClick={() => prevPage()}
                    >
                        上一步
                    </Button>
                }
                {
                    current === 2 && <span><Button type='primary' style={{ width: 100, marginLeft: 20 }}
                        onClick={() => saveDrafts(0)}
                    >保存草稿箱</Button>
                        <Button danger style={{ width: 100, marginLeft: 20 }}
                            onClick={() => saveDrafts(1)}
                        >提交审核</Button></span >
                }
                {
                    current < 2 && <Button type="primary" htmlType="submit" style={{ width: 100, marginLeft: 20 }}
                        onClick={() => nextPage()}
                    >
                        下一步
                    </Button>
                }
            </div>

        </div >
    )
}
